<template>
	<!--我关注的租房->门店-->
	<!--https://youzan.github.io/vant/#/zh-CN/intro-->
	<div class="store">
		<!--没有数据-->
		<div class="noinfo" v-if="!showlogge">
			<img src="../../../../static/wfy/crying_face.jpg" />
			<h3 class="showtop">您还没有关注的门店</h3>
			<p>去关注门店吧</p>
		</div>
		<!--有数据-->
		<ul class="houseinfo" v-else-if="showlogge">
			<li>
				<button class="cancel" @click="toggleCancel">取消关注</button>
				<router-link to='/lideta/mydetails'>
					<div class="bg1">
						<img class="dataimg" src="../../../../static/wfy/hose02.jpg" />
						<div class="houselogo">
							<img src="../../../../static/wfy/icon01.png" />
						</div>
					</div>
					<div class="titlebox">
						<h3 class="title1">珠江太阳城</h3>
						<p class="title2">北城路51号</p>
						<div class="title-pic">
							<h3 class="hosepic">24500元/月起</h3>
							<dl>
								<label class="apartment">5个户型| </label>
								<label class="hosedsingle">170套在租</label>
							</dl>
						</div>
					</div>
				</router-link>
			</li>
		</ul>
		<div class="bggun" v-show="isShow">
			<div class="cancel_conentbox"  >
				<h3 class="title">是否确认取消当前房源关注？</h3>
				<div class="choice">
					<button class="">确认</button>
					<button @click="toggleCancel">取消</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import myheader from '@/components/public/myheader'
	export default {
		name: 'store',
		data() {
			return {
				showlogge: true,
				isShow: false
			}
		},
		mounted:function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid")==null||localStorage.getItem("nameid")==undefined||localStorage.getItem("nameid")==""){
				this.$router.push({
					name:'login'
				});
			}
			else{
				
			}
		},
		components: {
			myheader
		},
		methods: {
			toggleCancel: function() {
				this.isShow = !this.isShow
				if (this.isShow) {
					this.btnText = "隐藏"
				} else {
					this.btnText = "显示"
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.noinfo {
		margin-top: 3.1rem;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.showtop {
		width: 100%;
		text-align: center;
		margin-top: 0.85rem;
	}
	
	.noinfo img {
		width: 1.63rem;
		height: 1.63rem;
	}
	
	.noinfo p {
		margin-top: 0.35rem;
		font-size: 0.3rem;
		color: #8f929c;
	}
	
	.houseinfo {
		list-style: none;
	}
	
	.houseinfo li {
		padding: 0.35rem 0.3rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.houseinfo li>a {
		width: 100%;
		height: 100%;
		display: block;
		box-sizing: border-box;
	}
	
	.bg1 {
		width: 100%;
		height: 3.75rem;
		position: relative;
	}
	
	.houseinfo li>a .dataimg {
		width: 100%;
		height: 3.75rem;
	}
	
	.titlebox {
		padding: 0.3rem 0;
	}
	
	.title1 {
		font-size: 0.28rem;
		color: #000000;
		height: 0.4rem;
	}
	
	.title2 {
		font-size: 0.2rem;
		color: #b7b7bc;
		height: 0.4rem;
	}
	
	.title-pic {
		display: flex;
		justify-content: space-between;
	}
	
	.hosepic {
		color: #ff665e;
		font-size: 0.35rem;
	}
	
	.apartment,
	.hosedsingle {
		color: #99a0a6;
		font-size: 0.18rem;
	}
	
	.houseinfo .cancel {
		height: 0.4rem;
		width: 1.25rem;
		text-align: center;
		outline: none;
		border: none;
		background: #fff;
		color: #384053;
		position: absolute;
		right: 0.55rem;
		top: 0.55rem;
		border-radius: 0.05rem;
		font-size: 0.12rem;
		z-index: 666;
	}
	
	.houselogo {
		position: absolute;
		bottom: -0.5rem;
		right: 0.25rem;
		height: 0.9rem;
		width: 0.9rem;
	}
	
	.houselogo>img {
		height: 0.9rem;
		width: 0.9rem;
	}
	
	.bggun {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .4);
		z-index: 9998;
	}
	
	.cancel_conentbox {
		width: 5.35rem;
		height: 3.25rem;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		transform: translate(-50%, -50%);
		max-width: 90%;
		min-width: 70%;
		background: #fff;
		text-align: center;
		border-radius: 0.1rem;
	}
	
	.cancel_conentbox .title {
		font-size: 0.38rem;
		font-weight: 700;
		padding-top: 0.5rem;
	}
	
	.choice {
		display: flex;
		justify-content: space-around;
		margin-top: 1.3rem;
		align-items: center;
	}
	
	button {
		display: block;
		width: 50%;
		outline: none;
		border: none;
		background: #fff;
		height: 1rem;
		color: #6489c1;
	}
</style>